<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/fusionchar/FusionCharts.js" charset="utf-8"></script>
	<script type="text/javascript">
	$(document).ready(function(){
			//弹出页面-告警级别
			$('#dqm_rule_result_search_warnLevel_trend').combobox({
				url:'${pageContext.request.contextPath}/problemmgr/problemAction!getDic.action?codeType=warnLevel&method=list',  
				valueField:'codeValue',  
				textField:'codeName',
				panelHeight:'auto',
				editable:false,
				onLoadSuccess:function(){
					var v = $('#dqm_rule_result_search_warnLevel_trend').combobox('getValue');
					if($.trim(v)==""){
						$('#dqm_rule_result_search_warnLevel_trend').combobox('setValue',null);
					}
				}
			});

			//弹出页面-维度信息
			$('#dqm_rule_result_search_diminfo_trend').combogrid({
				url:'',
				panelWidth:430,
				panelHeight:205,
				idField: 'diminfo',
				textField:'diminfo',
				pagination : true,
				pageList:[10,20,30],
				multiple: true,
				fitColumns: true,
				editable:false,
				onUncheckAll:function(rows){
					$.messager.alert('提示','请最少选择一个查询,默认选择了第一行');
					var rows=$('#dqm_rule_result_search_diminfo_trend').combogrid('grid').datagrid('getRows');
					if(rows.length){
						$('#dqm_rule_result_search_diminfo_trend').combogrid('setValue',rows[0]['diminfo']);//默认选择第一行
					}
				},
				onUnselect:function(rowIndex,rowData){
					var grid=$('#dqm_rule_result_search_diminfo_trend').combogrid('grid');
					var checked=grid.datagrid('getChecked');
					if(!checked.length)
					{
						$.messager.alert('提示','请最少选择一个查询,默认选择了第一行');
						var rows=$('#dqm_rule_result_search_diminfo_trend').combogrid('grid').datagrid('getRows');
						if(rows.length){
							$('#dqm_rule_result_search_diminfo_trend').combogrid('setValue',rows[0]['diminfo']);//默认选择第一行
						}
					}
				},
				onUncheck:function(rowIndex,rowData){
					var grid=$('#dqm_rule_result_search_diminfo_trend').combogrid('grid');
					var checked=grid.datagrid('getChecked');
					if(!checked.length)
					{
						$.messager.alert('提示','请最少选择一个查询,默认选择了第一行');
						var rows=$('#dqm_rule_result_search_diminfo_trend').combogrid('grid').datagrid('getRows');
						if(rows.length){
							$('#dqm_rule_result_search_diminfo_trend').combogrid('setValue',rows[0]['diminfo']);//默认选择第一行
						}
					}
				},
				onLoadSuccess:function(){
					var diminfoDiv=$("td[field='diminfo'] div");//如果diminfo的内容太长，则由...代替
					diminfoDiv.css({
						"white-space":"nowrap",
						"text-overflow":"ellipsis",
						"-o-text-overflow":"ellipsis",
						"overflow":"hidden"
					});
				},
				columns: [[
							{field:'ck',checkbox:true},
							{field:'diminfo',title:'维度信息 ',width:100,sortable:true,align:'center',formatter:function(value,rowData,rowIndex){
								return '<span title="'+value+'">'+value+'<span>';}},
						]]
			});
			//弹出页面-查询和重置按钮事件绑定
			$("#btnQuery_trend").bind("click",doQuery_Trend);
			$("#btnReset_trend").bind("click",doReset_Trend);
	 });//end-页面加载完成事件
	 
	//弹出页面-查询
	function doQuery_Trend(){
		loadCharts();
	}
	
	//弹出页面-重置
	function doReset_Trend(){
		$('#dqm_rule_result_search_warnLevel_trend').combobox('setValue',null);
		var rows=$('#dqm_rule_result_search_diminfo_trend').combogrid('grid').datagrid('getRows');
		if(rows.length){
			$('#dqm_rule_result_search_diminfo_trend').combogrid('setValue',rows[0]['diminfo']);//默认选择第一行
		}
		$('#dqm_rule_result_search_startDate_trend').val('');
		$('#dqm_rule_result_search_endDate_trend').val('');
	}
	
	//加载chars图
	function loadCharts(){
		if($('#dqm_rule_result_charts_form').form('validate'))
		{
			$.ajax({
				 url :'${pageContext.request.contextPath}/basemgr/kpiDataSearchAction!toChars.action',
				 data:serializeObject($('#dqm_rule_result_charts_form')),
				 success : function(data){
					 try {
						//加载多线趋势charts图
						var charsDiv = new FusionCharts("${pageContext.request.contextPath}/js/fusionchar/charts/MSLine.swf", "ruleresultcharsid",$('#dqm_rule_result_chars_div').width(), $('#dqm_rule_result_chars_div').height(), "0", "1");
							charsDiv.setDataXML(data);
							charsDiv.addParam("wmode","Opaque");
							charsDiv.render("dqm_rule_result_chars_div");
					} catch (e) {
						alert(e);
						window.top.$.messager.alert('提示','显示charts失败');
					}
				}
			});
		}
	}
	//弹出页面-根据规则编号和规则版本号查询维度信息
	function loadDimInfoSelectTrend(ruleId,ruleversionNum){
		var grid=$('#dqm_rule_result_search_diminfo_trend').combogrid('grid');
		var gridOptions=grid.datagrid('options');
		gridOptions.url='${pageContext.request.contextPath}/basemgr/kpiDataSearchAction!getDimInfos.action?ruleId='+ruleId+'&ruleversionNum='+ruleversionNum;
		grid.datagrid(gridOptions);
	}
	</script>

<div style="width:100%;height:100%">
	<!-- 弹出窗口的toolbar -->
	<div id="dqm_rule_result_dialog_toolbar" style="background-color:white;">
		<form id="dqm_rule_result_charts_form" method="post">
			<div data-options="region:'north'" style="height:100px;border-bottom:none;border-top:none;overflow-x: hidden;background-color:rgb(240, 246, 252)">
			<table border="0" cellpadding="0" cellspacing="0" height="100%"  width="100%" >
				<tr>
					<td style="text-align:right;width:10%;" nowrap="nowrap">
						<label>维度信息：&nbsp;</label>
					</td>
					<td colspan="3" style="text-align:left;width:15%;">
						<input type="hidden" id="dqm_rule_result_search_ruleId_trend" name="ruleId"/>
						<input type="hidden" id="dqm_rule_result_search_rulename_trend" name="ruleName"/>
						<input type="hidden" id="dqm_rule_result_search_ruleversionnum_trend" name="ruleversionNum"/>
						<input type="text" id="dqm_rule_result_search_diminfo_trend" name="diminfo" panelHeight="auto" style="width:348px"/>
					</td>
					<td style="text-align:right;width:10%;" nowrap="nowrap">
						<label>日期&nbsp;</label>
					</td>
					<td style="text-align:left;width:15%;" nowrap="nowrap">
						<input id="dqm_rule_result_search_startDate_trend" name="startDate" type="date"  style="width:160px;margin-top:2px;"/>
						至&nbsp;<input id="dqm_rule_result_search_endDate_trend" name="endDate"  type="date"  style="width:160px;margin-top:2px"/>
					</td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td style="text-align:right;width:10%;" nowrap="nowrap">
						<label>告警级别：&nbsp;</label>
					</td>
					<td style="text-align:left;width:15%;">
						<input type="text" id="dqm_rule_result_search_warnLevel_trend" name="warnLevel" panelHeight="auto"/>
					</td>
					<td style="text-align:center;width:15%;" >
						<input type="button" id="btnQuery_trend" name="" value="查 询" style="cursor:pointer;background-image: url('${pageContext.request.contextPath}/images/login/search.png');background-repeat: no-repeat;width:67px;height:23px;padding-left:12px;border:none;color:white;font-family:微软雅黑;"/>	
						<input type="button" id="btnReset_trend" name="" value="重 置" style="cursor:pointer;background-image: url('${pageContext.request.contextPath}/images/login/reset.png');background-repeat: no-repeat;width:67px;height:23px;padding-left:12px;border:none;color:white;font-family:微软雅黑;"/>				
					</td>
				</tr>
			</table>
			</div>
			<!-- charts要渲染的div -->
			<div data-options="region:'center'" style="border-top:none">
				<div id="dqm_rule_result_chars_div" style="width:100%;height:428px;">
				</div>
			</div>
		</form>
	</div>
</div>